import {Component, ViewEncapsulation, Input} from '@angular/core';
//import {Chart} from './trafficChart.loader';
import {TrafficChartService} from './trafficChart.service';
import {UserService} from './../../../../services/app.user';
import {Constants} from '../../../../common/app.constants';

declare let toastr:any;
declare let $:any;
declare var jQuery:any;
import * as Chart from './chart.js'; 
//declare var Chart:any;
@Component({
    selector: 'traffic-chart',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./trafficChart.scss'],
    templateUrl: './trafficChart.html',
    providers: [TrafficChartService]
})

export class TrafficChart {
    @Input()
    constants: Constants;
    public total:any;
    public textLable:any;
    public userName:any;
    public start:any;
    public end:any;
    public check:any;

    public doughnutData:Array<Object>;

    constructor(private trafficChartService:TrafficChartService, private userService:UserService) {
      this.constants = new Constants();
        // Call after 3 sec to load timeline chart
        setTimeout(() => {
            this.total = trafficChartService.totalCount;
            this.textLable = trafficChartService.text;
            this.userName = trafficChartService.userName;
            this.doughnutData = trafficChartService.getData();
            this._loadDoughnutCharts();
        }, 3000);

      this.start = 0;
      this.check = 0;

      // start timer for timestamp
      this.startCount();
    }

    // Function for get data and load chart
    private _loadDoughnutCharts() {
        let el = jQuery('.chart-area').get(0);
        new Chart(el.getContext('2d')).Doughnut(this.doughnutData, {
            segmentShowStroke: false,
            percentageInnerCutout: 64,
            responsive: true
        });
    }

  // To call every 1 sec for count how much time we spent on this page
  public  timedCount() {
    this.start = this.start + 1;
    this.end = setTimeout(() => {
      this.timedCount()
    }, 1);
  }

  // To function for start timstamp count
  public startCount() {
    if (!this.check) {
      this.check = 1;
      this.timedCount();
    }
  }

  // To function for stop timstamp count
  public stopCount() {
    clearTimeout(this.end);
    this.check = 0;
  }

  ngOnDestroy() {
    // To stop count function call
    this.stopCount();

    // API call for tract navigation sequence
    let seq = {
      sequence: {
        "pageName": 'admin/timeline',
        "timeSpent": this.start
      }

    };
    this.userService.setUrlSeq(seq).subscribe();
  }

  public getCSV(data) {
    let input = {
      userId: this.trafficChartService.userIdForTimeline
    };
    this.userService.getTimelineCSV(input).subscribe(
      data => this.getCSVSuccess(data),
      error => {
      }
    );
  }

  public getCSVSuccess(data) {
    let url = this.constants.LINK;
    let fileName = data.substr(1, data.length);
    let urlOfFile = url + '' + fileName;
    window.open(urlOfFile, '_blank');
  }
}
